<template>
	<view class="search-page">
		<!-- 搜索框 -->
		<view class="search-container">
			<input 
				type="text" 
				v-model="searchText" 
				placeholder="请搜索商品" 
				class="search-input" 
				@input="handleSearch"
			/>
		</view>

		<!-- 搜索记录区域：进入页面即显示（若有记录） -->
		<view class="history-section" v-if="shouldShowHistory">
			<view class="history-header">
				<text>历史搜索</text>
				<text class="clear-btn" @click="clearHistory">清空</text>
			</view>
			<view class="history-tags">
				<view 
					class="history-tag" 
					v-for="(item, index) in searchHistory" 
					:key="index"
					@click="searchByHistory(item)"
				>
					{{ item }}
				</view>
			</view>
		</view>

		<!-- 搜索结果 -->
		<view class="result-list" v-if="isSearching">
			<view class="result-item" v-for="(item, index) in filteredGoods" :key="index" @click="goToDetail(item)">
				<image :src="item.image" class="item-img" mode="aspectFit" />
				<view class="item-info">
					<view class="item-name">{{ item.name }}</view>
					<view class="item-price">￥{{ item.price }}束</view>
				</view>
			</view>
			<view class="empty" v-if="filteredGoods.length === 0">
				未找到匹配商品
			</view>
		</view>

		<!-- 初始提示：无搜索记录且未搜索时显示 -->
		<view class="initial-tip" v-if="!isSearching && !searchHistory.length">
			请搜索商品
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchText: '', // 搜索关键词
				allGoods: [], // 全量商品数据
				filteredGoods: [], // 筛选后的商品
				searchHistory: [], // 搜索记录
				isSearching: false // 是否正在搜索（有输入内容）
			};
		},
		computed: {
			// 显示历史记录的条件：无搜索内容且有历史记录
			shouldShowHistory() {
				return !this.isSearching && this.searchHistory.length > 0;
			}
		},
		onLoad(options) {
			// 接收全量商品数据
			if (options.allGoods) {
				this.allGoods = JSON.parse(decodeURIComponent(options.allGoods));
			}
			// 从本地存储读取历史记录（进入页面直接加载）
			this.searchHistory = uni.getStorageSync('searchHistory') || [];
		},
		methods: {
			// 实时搜索
			handleSearch() {
				const keyword = this.searchText.trim().toLowerCase();
				this.isSearching = !!keyword; // 有输入内容则视为正在搜索

				if (!keyword) {
					this.filteredGoods = [];
					return;
				}

				// 筛选商品
				this.filteredGoods = this.allGoods.filter(goods => 
					goods.name.toLowerCase().includes(keyword)
				);

				// 保存搜索记录（去重、限制数量）
				this.saveSearchHistory(keyword);
			},

			// 保存搜索记录
			saveSearchHistory(keyword) {
				// 去重：如果记录已存在，先移除
				const index = this.searchHistory.findIndex(item => item.toLowerCase() === keyword);
				if (index > -1) {
					this.searchHistory.splice(index, 1);
				}
				// 添加到头部（最新记录在前）
				this.searchHistory.unshift(keyword);
				// 限制最多保存10条记录
				if (this.searchHistory.length > 10) {
					this.searchHistory.pop();
				}
				// 保存到本地存储
				uni.setStorageSync('searchHistory', this.searchHistory);
			},

			// 点击历史记录重新搜索
			searchByHistory(keyword) {
				this.searchText = keyword;
				this.handleSearch(); // 触发搜索
			},

			// 清空历史记录（彻底清除本地存储和页面数据）
			clearHistory() {
				uni.showModal({
					title: '提示',
					content: '确定要清空所有搜索记录吗？',
					success: (res) => {
						if (res.confirm) {
							// 清空页面数据
							this.searchHistory = [];
							// 清空本地存储
							uni.removeStorageSync('searchHistory');
						}
					}
				});
			},

			// 跳转到商品详情
			goToDetail(goods) {
				uni.navigateTo({
					url: `/pages/goodsDetail/goodsDetail?goods=${encodeURIComponent(JSON.stringify(goods))}`
				});
			}
		}
	};
</script>

<style scoped>
	/* 样式保持不变 */
	.search-page {
		background-color: #f5f5f5;
		min-height: 100vh;
		padding: 20rpx;
	}

	.search-container {
		background-color: #fff;
		border-radius: 35rpx;
		padding: 0 20rpx;
	}

	.search-input {
		width: 100%;
		height: 70rpx;
		font-size: 28rpx;
		border: none;
		outline: none;
	}

	/* 历史记录样式 */
	.history-section {
		background-color: #fff;
		border-radius: 10rpx;
		padding: 20rpx;
		margin-top: 20rpx;
	}

	.history-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
		font-size: 28rpx;
		color: #666;
	}

	.clear-btn {
		color: #999;
		font-size: 24rpx;
	}

	.history-tags {
		display: flex;
		flex-wrap: wrap;
		gap: 15rpx;
	}

	.history-tag {
		background-color: #f5f5f5;
		padding: 10rpx 20rpx;
		border-radius: 20rpx;
		font-size: 26rpx;
		color: #333;
	}

	/* 搜索结果样式 */
	.result-list {
		margin-top: 20rpx;
	}

	.result-item {
		display: flex;
		align-items: center;
		background-color: #fff;
		border-radius: 10rpx;
		padding: 15rpx;
		margin-bottom: 10rpx;
	}

	.item-img {
		width: 100rpx;
		height: 100rpx;
		margin-right: 20rpx;
		border-radius: 8rpx;
	}

	.item-info {
		flex: 1;
	}

	.item-name {
		font-size: 28rpx;
		margin-bottom: 10rpx;
		color: #333;
	}

	.item-price {
		font-size: 26rpx;
		color: #ff6700;
	}

	/* 空状态样式 */
	.empty, .initial-tip {
		text-align: center;
		padding: 50rpx 0;
		color: #999;
		font-size: 28rpx;
	}
</style>